<template>
  <div class="suggest-container">
    <el-form
      ref="houseInfoForm"
      :model="houseInfoFormData"
      :rules="houseInfoFormRules"
      size="medium"
      label-width="100px"
      label-position="right"
    >
      <el-card class="card-form" shadow="hover">
        <el-divider>基本信息</el-divider>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="estateName">
            <el-input
              v-model.trim="houseInfoFormData.estateName"
              placeholder="请输入项目名称"
              clearable
              :style="{ width: '100%' }"
              @focus="showBuildingDialog"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售状态" prop="saleStatus">
            <el-radio-group
              v-model.trim="houseInfoFormData.saleStatus"
              size="medium"
            >
              <el-radio
                v-for="(item, index) in saleStatusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="项目名称" prop="projectName">
            <el-select
              v-model.trim="houseInfoFormData.projectName"
              placeholder="请选择项目名称"
              clearable
              :style="{ width: '100%' }"
            >
              <div v-for="(item, index) in optionProject" :key="index">
                <el-option
                  :label="item.projectName"
                  :value="item.projectName"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="住址" prop="address">
            <el-input
              v-model.trim="houseInfoFormData.address"
              placeholder="请输入住址"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房型" prop="estateType">
            <el-select
              v-model.trim="houseInfoFormData.estateType"
              placeholder="请选择房型"
              clearable
              :style="{ width: '100%' }"
            >
              <div v-for="(item, index) in optionHouseType" :key="index">
                <el-option
                  :label="item.typeName"
                  :value="item.typeName"
                ></el-option>
              </div>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="楼栋" prop="building">
            <el-input-number
              v-model.trim="houseInfoFormData.building"
              placeholder="请输入楼栋"
              clearable
              :min="0"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="房号" prop="num">
            <el-input-number
              v-model.trim="houseInfoFormData.num"
              placeholder="请输入房号"
              clearable
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单元" prop="unit">
            <el-input-number
              v-model.trim="houseInfoFormData.unit"
              placeholder="请输入单元"
              clearable
              :min="0"
              :max="100"
              :style="{ width: '100%' }"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-card>
      <el-form-item class="btn">
        <el-button type="primary" @click="createHouse()">立即创建</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="请选择项目"
      :visible.sync="buildingDialogVisible"
      width="30%"
    >
      <vab-query-form>
        <el-form
          ref="form"
          :model="queryForm"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input
              v-model.trim="queryBean.floorName"
              placeholder="楼盘名称"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="submit"
              @click="handleQuery"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form>
      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :data="list"
        :element-loading-text="elementLoadingText"
        :height="height"
        @sort-change="tableSortChange"
      >
        <el-table-column
          show-overflow-tooltip
          prop="floorName"
          label="项目名称"
        ></el-table-column>
        <!-- <el-table-column
          show-overflow-tooltip
          label="项目名称"
          prop="base.projectName"
        ></el-table-column> -->
        <el-table-column show-overflow-tooltip label="绑定">
          <template #default="{ row }">
            <el-button
              type="primary"
              icon="el-icon-connection"
              @click="handleSelect(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :background="background"
        :current-page="queryForm.pageNum"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
  import { fetchBuildingList } from '@/api/building'
  import { createHouseInfo } from '@/api/house'
  import { getProjectList } from '@/api/project'
  import { getHouseType } from '@/api/tag'
  export default {
    name: 'Add',
    data() {
      return {
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        background: true,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          queryBean: {},
        },
        queryBean: { floorName: '' },
        buildingDialogVisible: false,
        houseInfoFormData: {
          building: 0,
          // projectName: '',
          address: '',
          estateName: '',
          estateId: '',
          estateType: '',
          num: 0,
          unit: 0,
          saleStatus: 1,
          attributeMap: {},
        },
        houseInfoFormRules: {
          // estateName: [
          //   {
          //     required: true,
          //     message: '请输入项目名称',
          //     trigger: 'blur',
          //   },
          // ],
          // projectName: [
          //   {
          //     required: true,
          //     message: '请输入项目名称',
          //     trigger: 'blur',
          //   },
          // ],
          address: [
            {
              required: true,
              message: '请输入住址',
              trigger: 'blur',
            },
          ],
          building: [
            {
              required: true,
              message: '请输入楼栋',
              trigger: 'blur',
            },
          ],
          estateType: [
            {
              required: true,
              message: '请输入房型',
              trigger: 'blur',
            },
          ],
          num: [
            {
              required: true,
              message: '请输入房号',
              trigger: 'blur',
            },
          ],
          unit: [
            {
              required: true,
              message: '请输入单元',
              trigger: 'blur',
            },
          ],
        },
        saleStatusOptions: [
          {
            label: '未售',
            value: 1,
          },
          {
            label: '在售',
            value: 2,
          },
          {
            label: '已售',
            value: 3,
          },
        ],
        optionProject: [],
        optionHouseType: [],
      }
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    created() {
      this.getDefaultData()
    },
    mounted() {},
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNum = 1
        if (this.queryBean.floorName == '') {
          this.queryForm.queryBean = {}
        } else {
          this.queryForm.queryBean = this.queryBean
        }
        this.fetchData()
      },
      showBuildingDialog() {
        this.fetchData()
        this.buildingDialogVisible = true
      },
      handleSelect(row) {
        this.houseInfoFormData.estateName = row.floorName
        this.houseInfoFormData.businessId = row.floorId
        this.buildingDialogVisible = false
      },
      async getDefaultData() {
        // const { data } = await getProjectList()
        // this.optionProject = data.body
        const { data: res } = await getHouseType()
        this.optionHouseType = res.body
      },
      createHouse() {
        this.$refs['houseInfoForm'].validate((valid) => {
          if (valid) {
            if (this.houseInfoFormData.estateName == '') {
              this.$message({
                type: 'error',
                message: '未选择项目!',
              })
              return
            }
            this.houseInfoFormData.unit = Number(this.houseInfoFormData.unit)
            this.houseInfoFormData.num = Number(this.houseInfoFormData.num)
            this.houseInfoFormData.building = Number(
              this.houseInfoFormData.building
            )
            createHouseInfo(this.houseInfoFormData).then(() => {
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000,
              })
              this.$router.push('/house/list')
            })
          }
        })
      },
      resetForm() {
        this.$refs['houseInfoForm'].resetFields()
      },
      async fetchData() {
        this.listLoading = true
        // const
        const { data } = await fetchBuildingList(this.queryForm)
        const { body, message } = data
        if (message == '成功') {
          const { data, totalSize } = body
          this.total = totalSize
          this.list = data
          this.$baseNotify('数据获取完毕！', '成功', 'success', 'top-right')
          console.log(data)
        }
        this.listLoading = false
      },
    },
  }
</script>
<style lang="scss" scoped>
  .card-form {
    margin-top: 5px;
    border: 1px solid #efefef;
    border-radius: 10px;
  }
  .btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>
